<script setup>
import { ref, reactive } from 'vue'
import { getBannersApi, updateApi } from '@/api/goods'
import FromDrawer from '@/components/from-drawer.vue'
import { toast } from '@/utils/elnotification'
import Editor from '@/components/Editor.vue'

//表单数据
const form = reactive({
  content: ''
})

//轮播图id
const goodsId = ref(0)

// 绑定节点
const formDrawerRef = ref(null)

//抽屉显示方法
const show = async (row) => {
  goodsId.value = row.id

  const res = await getBannersApi(goodsId.value)

  form.content = res.content

  formDrawerRef.value.open()
}

//按钮加载效果
const loading = ref(false)

const emit = defineEmits(['reLoadData'])

//提交事件
const submit = async () => {
  formDrawerRef.value.showLoading()
  try {
    await updateApi(goodsId.value, form)
    toast('设置商品详情成功')
    formDrawerRef.value.close()
    emit('reLoadData')
  } catch (error) {
  } finally {
    formDrawerRef.value.hideLoading()
  }
}

//暴露方法
defineExpose({
  show
})
</script>

<template>
  <FromDrawer ref="formDrawerRef" title="设置商品详情" @submit="submit" destroy-on-close>
    <el-form :model="form">
      <el-form-item>
        <Editor v-model="form.content"></Editor>
      </el-form-item>
    </el-form>
  </FromDrawer>
</template>
